---
title: Liens
image: /images/user-guide/what-is-twenty/20.png
---

<Frame>
  <img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
</Frame>

## Lien de contact

Un composant de lien stylisé pour afficher les informations de contact.

<Tabs>
<Tab title="Usage">

```jsx
import { BrowserRouter as Router } from 'react-router-dom';

import { ContactLink } from 'twenty-ui/navigation';

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log('Contact link clicked!', event);
  };

  return (
    <Router>
      <ContactLink
        className
        href="mailto:example@example.com"
        onClick={handleLinkClick}
      >
        example@example.com
      </ContactLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| Propriétés  | Type              | Description                                              |
| ----------- | ----------------- | -------------------------------------------------------- |
| nomDeClasse | chaîne            | Nom facultatif pour un style supplémentaire              |
| href        | chaîne            | L'URL cible ou le chemin du lien                         |
| onClick     | fonction          | Fonction de rappel à déclencher lors du clic sur le lien |
| enfants     | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien              |

</Tab>

</Tabs>

## Lien brut

Un composant de lien stylisé pour afficher les liens.

<Tabs>
<Tab title="Usage">

```jsx
import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RawLink className href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RawLink>
    </Router>
  );
};

```

</Tab>
<Tab title="Props">

| Propriétés  | Type              | Description                                              |
| ----------- | ----------------- | -------------------------------------------------------- |
| nomDeClasse | chaîne            | Nom facultatif pour un style supplémentaire              |
| href        | chaîne            | L'URL cible ou le chemin du lien                         |
| auClique    | fonction          | Fonction de rappel à déclencher lors du clic sur le lien |
| enfants     | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien              |

</Tab>
</Tabs>

## Lien arrondi

Un lien de style arrondi avec un composant Chip pour les liens.

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  const handleLinkClick = (event) => {
    console.log("Contact link clicked!", event);
  };

  return (
    <Router>
      <RoundedLink href="/contact" onClick={handleLinkClick}>
        Contact Us
      </RoundedLink>
    </Router>
  );
};
```

</Tab>

<Tab title="Props">

| Propriétés | Type              | Description                                              |
| ---------- | ----------------- | -------------------------------------------------------- |
| href       | chaîne            | L'URL cible ou le chemin du lien                         |
| enfants    | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien              |
| auClique   | fonction          | Fonction de rappel à déclencher lors du clic sur le lien |

</Tab>
</Tabs>

## Lien social

Liens sociaux stylisés, avec support pour différents types de liens sociaux, tels que les URL, LinkedIn, et X (ou Twitter).

<Tabs>
<Tab title="Usage">

```jsx
import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";

export const MyComponent = () => {
  return (
    <Router>
      <SocialLink
        type="twitter"
        href="https://twitter.com/twentycrm"
      ></SocialLink>
    </Router>
  );
};
```

</Tab>
<Tab title="Props">

| Propriétés | Type              | Description                                                                                                     |
| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------- |
| href       | chaîne            | L'URL cible ou le chemin du lien                                                                                |
| enfants    | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien                                                                     |
| type       | chaîne            | Le type de liens sociaux. Les options incluent: `url`, `LinkedIn`, et `Twitter` |
| auClique   | fonction          | Fonction de rappel à déclencher lors du clic sur le lien                                                        |

</Tab>
</Tabs>
